import React, { useEffect, useState } from 'react'
import {
  Button,
  Form,
  Input,
  Table,
  Modal,
  Popconfirm,
  InputNumber,
  DatePicker,
  Select
} from 'antd'
import { getUser, addUser, editUser,delUser } from '../../api/index'
import dayjs from 'dayjs'
import './user.css'
const User = () => {
  const [listData, setListData] = useState({
    name: ''
  })
  // 定义table数据
  const [tableDate, setTableDate] = useState([])
  //
  const [title, setTitle] = useState('新增用户')
  const [isAdd, setIsAdd] = useState(false)
  const getTableList = () => {
    getUser(listData).then((data) => {
      setTableDate(data.list)
    })
  }
  const handleClick = (data, rowData) => {
    if (data == 'add') {
      setTitle('新增用户')
      setIsAdd(true)
    } else {
      const row = JSON.parse(JSON.stringify(rowData))
      row.birth = dayjs(row.birth)
      // 表格数据回填
      form.setFieldsValue(row)
      setTitle('修改用户')
      setIsAdd(false)
    }
    setIsModalOpen(true)
  }
  const onFinish = (data) => {
    setListData({
      name: data.search
    })

  }
  useEffect(() => {
    getTableList()
  }, [listData])
  const confirm = (e) => {
    delUser({
      id: e.id
    }).then(() => {
      getTableList()
    })
  }
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text) => (text === 0 ? '女' : '男')
    },
    {
      title: '出生日期',
      dataIndex: 'birth',
      key: 'birth'
    },
    {
      title: '地址',
      dataIndex: 'addr',
      key: 'addr'
    },
    {
      title: '操作',
      key: 'action',
      render: (row) => (
        <div className="flexbox">
          <Button
            style={{ marginRight: '5px' }}
            onClick={() => handleClick('edit', row)}
          >
            编辑
          </Button>
          <Popconfirm
            title="提示"
            description="此操作将删除该用户,是否继续?"
            onConfirm={() => confirm(row)}
            okText="确认"
            cancelText="取消"
          >
            <Button danger type="primary">
              删除
            </Button>
          </Popconfirm>
        </div>
      )
    }
  ]
  const [isModalOpen, setIsModalOpen] = useState(false)
  // 创建From实例
  const [form] = Form.useForm()
  const handleOk = () => {
    // 表单校验
    form
      .validateFields()
      .then((values) => {
        // 处理日期参数
        values.birth = dayjs(values.birth).format('YYYY-MM-DD')
        console.log('Received values of form: ', values)
        if (isAdd) {
          // 新增
          addUser(values)
            .then(() => {
              handleCancel()
              getTableList()
            })
            .catch((err) => {})
        } else {
          // 编辑
          editUser(values).then(() => {
            handleCancel()
            getTableList()
          })
        }
      })
      .catch((err) => {})
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    form.resetFields()
  }
  useEffect(() => {
    getTableList()
  }, [])
  return (
    <div className="user">
      <div className="flex-box">
        <Button type="primary" onClick={() => handleClick('add')}>
          +新增
        </Button>
        <Form layout={'inline'} onFinish={onFinish}>
          <Form.Item name="search">
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </div>
        <Table style={{marginTop:'10px'}} columns={columns} dataSource={tableDate} rowKey={'id'} />
      <Modal
        title={title}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form
          onFinish={onFinish}
          labelCol={{
            span: 4
          }}
          wrapperCol={{
            span: 20
          }}
          labelAlign="left"
          form={form}
        >
          {!isAdd && <Form.Item name="id" hidden></Form.Item>}
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入姓名'
              }
            ]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: '请输入年龄'
              },
              {
                type: 'number',
                message: '年龄必须是数字'
              }
            ]}
          >
            <InputNumber
              placeholder="请输入年龄"
              // min={1}
              // max={10}
            />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '性别必填'
              }
            ]}
          >
            <Select
              style={{
                width: 120
              }}
              options={[
                {
                  value: 1,
                  label: '男'
                },
                {
                  value: 0,
                  label: '女'
                }
              ]}
              placeholder="请选择性别"
            />
          </Form.Item>
          <Form.Item
            label="出生日期"
            name="birth"
            rules={[
              {
                required: true,
                message: '请选择出生日期'
              }
            ]}
          >
            <DatePicker placeholder="请选择" format="YYYY/MM/DD" />
          </Form.Item>
          <Form.Item
            label="地址"
            name="addr"
            rules={[
              {
                required: true,
                message: '请输入地址'
              }
            ]}
          >
            <Input placeholder="请填写地址" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
export default User
